<template>
  <div class="code-container box box-ver">
      <div class="box box-ac">
        <div class="box box-ac title"><span class="form-must">*&nbsp;</span>验证码&nbsp;&nbsp;</div>
        <div class="box box-ac code-input-container">
          <input @focus="scrollToBot()" v-model="imagecode" placeholder="请输入验证码" class="code-input" type="text">
          <div class="tips">
            <span>（请输入</span>
            <span v-if="imagetype == '01'" class="red">红色</span>
            <span v-if="imagetype == '02'" class="yellow">黄色</span>
            <span v-if="imagetype == '03'" class="blue">蓝色</span>
            <span v-if="imagetype == '00'" class="">验证码</span>
            <span>内容）</span>
          </div>
        </div>
      </div>
      <div class="box box-ac">
        <div class="box code-request box-ac">
          <div :style="{'background-image':'url('+imagecontent+')'}" class="code-img icon"></div>
          <div @click="getCode" class="code-refresh box box-ac box-pc">重新获取</div>
        </div>
      </div>
    </div>
</template>
<script>
import config from '@/js/config'
import { xml2json, getXMLStr } from '@/js/xml2json'
import { openToast } from '@/js/tools'

export default {
  props: {
    invoicecode: {
      type: String,
      default () {
        return ''
      }
    },
    invoicenumber: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      imagecontent: '',
      imagetype: '00',
      imagecode: '',
      invoicedate: '',
      yzmsj: '',
      ymmj: '',
      isjym: ''
    }
  },
  methods: {
    scrollToBot () {
      // setTimeout(() => {
      //   document.body.scrollTop = document.body.scrollHeight
      // }, 200)
    },
    getCode () {
      let _this = this
      let checkkey = this.$store.state.checkkey
      let invoicecode = _this.invoicecode
      let invoicenumber = _this.invoicenumber
      if (invoicecode.length !== 10 && invoicecode.length !== 12) {
        openToast({
          msg: '发票代码为10或12位数字',
          duration: 2000
        })
        return
      }
      _this.$http({
        $vue: _this,
        type: 'XML',
        method: 'post',
        timeout: 5 * 1000,
        url: config.GXUrl + '/CheckInvoice/services/AutoImageCenter.ws?wsdl',
        data: {
          servername: 'CheckInvoiceImage',
          data: {
            checkkey: checkkey,
            checktype: '4',
            invoicecode,
            invoicenumber
          }
        }
      }).then(item => {
        _this.imagecontent = item.imagecontent['#text']
        _this.imagetype = item.imagetype['#text']
        _this.yzmsj = item.yzmsj['#text']
        _this.ymmj = item.ymmj['#text']
        _this.isjym = item.isjym['#text']
        _this.$emit('codeChange', _this.isjym)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../css/color';
@import '../css/mixins';
.code-container{
  margin-top:.18rem;
  padding:.3rem;
  background-color:#FFF;
  .title{
    width:5.5em
  }
  .code-input-container{
    .code-input{
      width:2rem;
      height: 0.7rem;
      padding-left:.15rem;
      padding-right:.15rem;
      border:1px solid $borderColor;
    }
    .tips{
      font-size:.24rem;
      .red{
        color:red;
      }
      .yellow{
        color:yellow;
      }
      .blue{
        color:blue;
      }
    }
  }

  .code-request{
    margin-top:.2rem;
    .code-img{
      width:2.2rem;
      height:.8rem;
      margin-left:.2rem;
      background-color:#DDD;
      @include bg-size(100% 100%);
    }
    .code-refresh {
      margin-left:.2rem;
      background-color:#88c2ff;
      color:#FFF;
      width:1.2rem;
      height:.42rem;
      font-size:.24rem;
      border-radius:.1rem;
    }
  }
}

</style>
